@mixin estimation {
    .points-per-role {
        display: flex;
        flex-direction: column;
    }
    .ticket-role-points {
        @include font-size(small);
        background: $color-gray100;
        color: $color-link-tertiary;
        display: flex;
        justify-content: space-between;
        margin-bottom: .1rem;
        min-height: 2rem;
        padding: .5rem;
        position: relative;
        &:last-child {
            background: $color-gray300;
            border-bottom: 0;
            &::first-letter {
                text-transform: uppercase;
            }
        }
        .points {
            color: $color-black600;
            overflow: hidden;
            padding-left: 1rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .popover {
        @include popover(
            $width: 188px,
            $top: 100%,
            $left: .5rem,
            $arrow-width: 10px,
            $arrow-top: -5px,
            $arrow-left: 10px,
            $arrow-height: 10px
        );

        &.fix {
            @include popover(
                200px,
                $top: 100%,
                $left: -160px,
                $arrow-width: 10px,
                $arrow-top: -5px,
                $arrow-left: 90%,
                $arrow-height: 10px
            );
        }
    }
}

.ticket-estimation {
    @include estimation;
}
